<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>数据分析</el-breadcrumb-item>
            <el-breadcrumb-item>流量分析</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
          <h3 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px;font-size: 20px">流量分析</h3>
          <div id="myChart1" :style="myChartStyle" ></div>
        </el-card>

      <el-card style="margin-top: 30px;">

        <h3 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px;font-size: 20px">各终端访问量趋势</h3>
        <div id="myChart2" :style="myChartStyle" ></div>

      </el-card>


      <el-card style="margin-top: 30px;padding-bottom: 30px">

            <h3 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px">数据明细</h3>

        <el-table :data="accessRecordList" border stripe>
          <el-table-column label="渠道" prop="channel"></el-table-column>
          <el-table-column label="访客数" prop="visitorsNum" ></el-table-column>
          <el-table-column label="访问量" prop="visits" ></el-table-column>
          <el-table-column label="平均访问次数" >
            <template slot-scope="sc">{{getAverage(sc.row)}}</template>
          </el-table-column>
          <el-table-column label="人均停留时长(h)" prop="stayTime"></el-table-column>
          <el-table-column label="跳出率">
            <template slot-scope="sc">{{sc.row.jumpOutRate.toFixed(2)}}%</template>
          </el-table-column>
          <el-table-column label="确认订单人数" prop="confirmedoOrdersNum"></el-table-column>
          <el-table-column label="支付人数" prop="payersNum"></el-table-column>
          <el-table-column label="转化率"  >
            <template slot-scope="sc">{{sc.row.conversionRate.toFixed(2)}}%</template>
          </el-table-column>
        </el-table>
        </el-card>

      <p style="margin-top: 30px">已经到底了~</p>
    </div>
</template>
<script>

    export default {
        data() {
            return {
              histogramList:[],//柱状图需要数据
              accessRecordList:[],//表格数据
              myChart: {},
              myChart2: {},
              xData: [], //横坐标
              yData: [], //人数数据
              sData: [], //多数据横坐标
              aData: [], //多数据纵坐标
              bData: [], //多数据纵坐标
              cData: [], //多数据纵坐标

              myChartStyle: { float: "left", width: "100%", height: "500px" },//图表样式
            };
        },
      mounted() {
        this.initEcharts();
        this.initEcharts2();
      },
        methods: {
          getAverage(row){
            let average=(row.visits/row.visitorsNum).toFixed(2);
            return average;
          },
          initEcharts2(){
            const option = {
              title:{
                text:"最近7天访问量数据"
              },
              xAxis: {
                data: this.sData
              },
              legend:{
                data:['APP端','PC端','小程序']
              },
              yAxis: {},
              series: [
                {
                  name:"APP端",
                  data: this.aData,
                  smooth: true,//线是圆滑的
                  type: "line" ,// 类型设置为折线图
                  itemStyle: {
                    normal: {
                      label : {show: true},
                      lineStyle: {
                        width: 4// 线条的粗细
                      }
                    }
                  }
                },
                {
                  name:"PC端",
                  data: this.bData,
                  smooth: true,//线是圆滑的
                  type: "line", // 类型设置为折线图
                  itemStyle: {
                    normal: {
                      lineStyle: {
                        width: 4// 线条的粗细
                      }
                    }
                  }
                },
                {
                  name:"小程序",
                  data: this.cData,
                  smooth: true,//线是圆滑的
                  type: "line", // 类型设置为折线图
                  itemStyle: {
                    normal: {
                      lineStyle: {
                        width: 4// 线条的粗细
                      }
                    }
                  }
                  },
              ]
            };
            this.myChart2 = this.$echarts.init(document.getElementById("myChart2"));
            this.myChart2.setOption(option);
            //随着屏幕大小调节图表
            window.addEventListener("resize", () => {
              this.myChart2.resize();
            });
          },
          getLineData(){
            let url = "accessRecord/getLineDataA";
            this.$axios.get(url
            ).then(res=>{
              if (res.data.code == 200){
                let lineListA=res.data.data;
                for(let i=lineListA.length-1;i>=0;i--){
                  this.sData.push(lineListA[i].accessTime.substring(0,10))
                  this.aData.push(lineListA[i].visits)
                }
                let aurl = "accessRecord/getLineDataP";
                this.$axios.get(aurl
                ).then(res=>{
                  if (res.data.code == 200){
                    let lineListP=res.data.data;
                    for(let i=lineListP.length-1;i>=0;i--){
                      this.bData.push(lineListP[i].visits)
                    }
                    let Burl = "accessRecord/getLineDataX";
                    this.$axios.get(Burl
                    ).then(res=>{
                      if (res.data.code == 200){
                        let lineListX=res.data.data;
                        for(let i=lineListX.length-1;i>=0;i--){
                          this.cData.push(lineListX[i].visits)
                        }
                        this.initEcharts2();
                      }else {
                        this.$message({
                          type:"error",
                          message:res.data.msg,
                          duration:1000
                        })
                      }
                    });
                  }else {
                    this.$message({
                      type:"error",
                      message:res.data.msg,
                      duration:1000
                    })
                  }
                });
              }else {
                this.$message({
                  type:"error",
                  message:res.data.msg,
                  duration:1000
                })
              }
            });
          },
          initEcharts() {
            let year = new Date().getFullYear();
            let month = new Date().getMonth() +1;
            let day = new Date().getDate();
            let hour = new Date().getHours();
            let minute = new Date().getMinutes();
            let time = year+'/'+month+'/'+ day+'  '+hour+'时'+minute+'分'
            const option = {
              title:{
                text:"访问量统计(天)"+"        "+"数据更新时间: "+time
              },
              xAxis: {
                data: this.xData
              },
              yAxis: {},
              series: [
                {
                  data: this.yData,
                  type: "bar" // 类型设置为柱状图
                }
              ]
            };
            this.myChart = this.$echarts.init(document.getElementById("myChart1"));
            this.myChart.setOption(option);
            //随着屏幕大小调节图表
            window.addEventListener("resize", () => {
              this.myChart.resize();
            });
          },
          getHistogramData(){   //获得柱状图数据
            let url = "accessRecord/getHistogramData";
            this.$axios.get(url
            ).then(res=>{
              if (res.data.code == 200){
                this.histogramList=res.data.data;
                for(let i=this.histogramList.length-1;i>=0;i--){
                  this.xData.push(this.histogramList[i].accessTime.substring(0,10))
                  this.yData.push(this.histogramList[i].visits)
                }
                this.initEcharts();
              }else {
                this.$message({
                  type:"error",
                  message:res.data.msg,
                  duration:1000
                })
              }
            });
          },
          getAccessRecordList(){
            let url = "accessRecord/getAccessRecord";
            this.$axios.get(url
            ).then(res=>{
              if (res.data.code == 200){
                this.accessRecordList=res.data.data;
              }else {
                this.$message({
                  type:"error",
                  message:res.data.msg,
                  duration:1000
                })
              }
            });
          },
            reloadData() {
            this.getHistogramData();
            this.getAccessRecordList();
            this.getLineData();
            }
        },
        created() {
            this.reloadData();
        }
    };
</script>
<style lang="less" scoped>
</style>